import * as echarts from '../../ec-canvas/echarts';

function getOption(data, sum) {
    return {
        title: {
            text: "支出",
            left: 'center',
            top: 'center'
        },
        tooltip: {
            trigger: 'item',
            confine: true
        },
        legend: {
            top: '0%',
            left: 'center'
        },
        series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            data: data,
        }]
    };
}

Page({

    /**
     * 页面的初始数据
     */
    data: {
        lazyEc: {
            lazyLoad: true
        },
        user: [],
        outcome: [],
        income: [],
        showStart: false,
        showEnd: false,
        checked:"outcome",
        yearStart: new Date().getFullYear(),
        monthStart: new Date().getMonth() + 1,

        yearEnd: new Date().getFullYear(),
        monthEnd: new Date().getMonth() + 1,

        currentDate: new Date().getTime(),
        minDate: new Date().getTime() - 315360000000,

        currentDateStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime(),

        currentDateEnd: new Date().getTime(),
    },
    onInput(event) {
        this.setData({
            currentDate: event.detail,
        });
    },
    showPopupStart() {
        this.setData({
            showStart: true
        });
    },
    showPopupEnd() {
        this.setData({
            showEnd: true
        });
    },
    onClose() {
        this.setData({
            showStart: false,
            showEnd: false
        });
    },
    init(optionData) { //手动初始化
        this.lazyComponent.init((canvas, width, height, dpr) => {
            let chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr
            })

            let option = getOption(optionData)

            chart.setOption(option)

            this.chart = chart //将图标实例绑定到this上，方便在其他函数中访问

            return chart
        })
    },
    changeType(event) {
        let type = event.currentTarget.dataset.type;
        if (type == "outcome") {
            let option = getOption(this.data.outcome)
            this.chart.setOption(option)
            this.setData({
                checked:"outcome"
            })
        } else {
            let option = getOption(this.data.income)
            this.chart.setOption(option)
            this.setData({
                checked:"income"
            })
        }
    },
    checkedTimeStart() {
        var time = this.data.currentDate;
        let user = this.data.user;
        console.log(new Date(time))
        console.log(new Date(this.data.currentDateEnd));
        if (time < this.data.currentDateEnd) {
            var monthStart = new Date(time).getMonth() + 1;
            var yearStart = new Date(time).getFullYear();
            if (monthStart < 10) {
                monthStart = "0" + monthStart
            }
            this.setData({
                monthStart,
                yearStart,
                currentDateStart: time
            })
        } else {
            console.log("开始时间不能大于结束时间");
        }
        this.handleArr(user)
        this.onClose()
    },
    checkedTimeEnd() {
        var time = this.data.currentDate;
        let user = this.data.user;
        if (time >= this.data.currentDateStart) {
            var monthEnd = new Date(time).getMonth() + 1;
            var yearEnd = new Date(time).getFullYear();
            if (monthEnd < 10) {
                monthEnd = "0" + monthEnd
            }
            this.setData({
                monthEnd,
                yearEnd,
                currentDateEnd: new Date(time + 2592000000).getTime()
            })
        } else {
            console.log("结束事件不能大于开始时间");
        }
        this.handleArr(user)
        this.onClose()
    },
    handleArr(arr) {
        var outcome = [];
        var income = [];
        arr.forEach(item => {
            if (item.type == "outcome" && item.Statistics.length != 0) {
                let sum = 0;
                item.Statistics.forEach(child => {
                    if (child.date >= this.data.currentDateStart && child.date <= this.data.currentDateEnd) {
                        sum += child.money
                    }
                })
                // console.log(sum);
                if (sum != 0) {
                    let obj = {
                        name: item.name,
                        value: sum
                    }
                    outcome.push(obj)
                }

            }
            if (item.type == "income" && item.Statistics.length != 0) {
                let sum = 0;
                item.Statistics.forEach(child => {
                    if (child.date >= this.data.currentDateStart && child.date <= this.data.currentDateEnd) {
                        sum += child.money
                    }
                })
                // console.log(sum);
                let obj = {
                    name: item.name,
                    value: sum
                }
                income.push(obj)
            }
        })
        console.log(outcome);
        console.log(income);
        this.init(outcome)
        this.setData({
            outcome,
            income
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 获取到组件
        this.lazyComponent = this.selectComponent('#mychart-dom-bar');

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        wx.request({
            url: `http://127.0.0.1:7001/user`,
            success: res => {
                console.log(res.data[0].detail);
                this.handleArr(res.data[0].detail)
                this.setData({
                    user: res.data[0].detail,
                    currentDateEnd: this.data.currentDate
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})